<template>
  <div
    v-loading="loading"
    class="app-container"
    :element-loading-text="loadingText"
  >
    <el-col :span="20" :xs="24">
      <el-form :model="queryParams" ref="queryForm" label-width="88px" :inline="true" >
        <el-form-item label="挂号单ID" prop="paintId" >
          <el-input
            v-model="queryParams.nickName"
            clearable
            placeholder="请输入患者ID"
            size="small"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="患者姓名" prop="paintName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入患者姓名"
            clearable
            size="small"
            style="width: 200px"
          />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="search">查询</el-button>
      </el-form>
    </el-col>
          <el-table
            ref="refTable"
            v-loading="loading"
            border
            :data="paintInfo"
            :row-class-name="tableRowClassName"
          >
            <el-table-column label="订单号" align="center" prop="dct_order_code"  />
            <el-table-column label="挂号单号" align="center" prop="dct_order_id" />
            <el-table-column label="患者姓名" align="center" key="dct_patient_name" prop="dct_patient_name" />
            <el-table-column label="总金额(元)" align="center" key="sum" prop="sum" />
            <el-table-column label="支付类型（0为未支付 1为支付宝支付 2为现金支付）" key="type" align="center" prop="dct_cost_type" >
              <template slot-scope="aaa">
                {{aaa.row.dct_cost_type===0?'未支付':(aaa.row.dct_cost_type===1?'支付宝支付':'现金支付')}}
              </template>
            </el-table-column>
            <el-table-column label="订单状态（0为未支付 1为已支付）" align="center" key="model" prop="dct_cost_status">
              <template slot-scope="aaa">
                {{aaa.row.dct_cost_status===0?'未支付':'已支付'}}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="dct_time"/>
            <el-table-column label="操作" align="center" >
              <template slot-scope="scope">

                <el-button type="text" icon="el-icon-view" size="mini" @click="xq(scope.row)">查看详情</el-button>
                <el-button type="text" :disabled="scope.row.dct_cost_type==1" icon="el-icon-bank-card" size="mini" @click="handlePayWithCash(scope.row.dct_order_id,'2')">现金收费</el-button>
                <el-button type="text" :disabled="scope.row.dct_cost_type==1" icon="el-icon-bank-card" size="mini" @click="handlePayWithCash(scope.row.dct_order_id,'1')">支付宝收费</el-button>
              </template>
            </el-table-column>
          </el-table>
    <el-dialog
      v-loading="loading"
      :title="title"
      :visible.sync="open"
      width="1000px"
      center
      append-to-body
    >
      <el-table
        v-loading="itemTableloading"
        border
        :data="orderChargeItemList"
      >
        <el-table-column label="详情ID" align="center" width="210" prop="dct_order_code" />
        <el-table-column label="处方ID" align="center" width="200" prop="dct_order_id" />
        <el-table-column label="名称" align="center" prop="dct_prescription_name" />
        <el-table-column label="价格" align="center" prop="dct_prescription_single_price" />
        <el-table-column label="数量" align="center" prop="dct_prescription_num" />
        <el-table-column label="小计" prop="dct_prescription_cost" align="center" />
        <el-table-column label="类型" align="center" prop="dct_prescription_type">
          <template slot-scope="scope">
            {{ scope.row.dct_prescription_type===0?'药品':'检查' }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="dct_cost_status" >
          <template slot-scope="scope">
            {{ scope.row.dct_cost_status===1?'已支付':'未支付' }}
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </span>
    </el-dialog>
    <!--工具按钮结束  -->
    <!--处方信息开始  -->
    <!--处方信息结束  -->
  </div>


</template>

<script>


  import {selectAll,selectOne,selectID,selectNum,update,select} from
      '@/api/cltmanage/chargelist.js'

  export default {
    name: "Role",
    data() {
      return {
        open: false,
        title:'',
        model:0,
        itemTableloading: false,
        orderChargeItemList: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userId: undefined,
          userName: undefined,
          status: undefined,
          deptId: undefined,
          nickName:undefined
        },

        activeNames:null,
        showSearch:true,
        // 遮罩层
        loading: false,
        //设置遮罩层的文字
        loadingText: '',
       //患者ID
        paintId:'',
       //患者姓名
        paintName:'',
      //支付状态
        type:null,
        //患者信息
        paintInfo:null,
      }
    },
    created() {
    selectAll().then(res=>{
      this.paintInfo = res.data
    })
      //加载状态的字典数据
    },
    methods: {
      cancel(){
        this.open = false
      },
      model1(row){
        this.model = row.model
        return this.model
      },
      tableRowClassName({ row, rowIndex }) {
        row.index = rowIndex
        this.model=this.paintInfo[rowIndex].model
      },
      search(){
        this.loading = true
        this.loadingText='数据查询中请稍后...'
        selectOne(this.addDateRange(this.queryParams)).then(res => {
          this.paintInfo=[]
          this.paintInfo=res.data

          this.status = (res.data.dct_cost_status==1?'已支付':'未支付')
          // this.careOrders = res.data.careOrders
          this.loading = false
          this.loadingText = ''
          // this.careOrders.filter((c,index) => {
          //   this.activeNames.push(index)
          // })
        }).catch(() => {
          this.msgError('查询失败')
          this.loading = false
          this.loadingText = ''
        })
      },
      upload(){
        selectAll().then(res=>{
          this.paintInfo = res.data
        })
      },


      handlePayWithCash(a,b){
        this.$confirm('是否确认现金支付' ,'提示',{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          update(a,b);
          selectAll().then(res=>{
            this.paintInfo = res.data
          })
        }).then(()=>{
          this.msgSuccess("修改成功")
        })
        },
      xq(row) {
        this.title = '查询【' + row.dct_patient_name + '】支付订单详情'
        this.open = true
        this.itemTableloading = true
        select(row.dct_order_id).then(res => {
          this.orderChargeItemList = res.data
          this.itemTableloading = false
        }).catch(() => {
          this.msgError('查询失败')
          this.itemTableloading = false
        })

      },

      },



  }
</script>
<style scoped>
  .demo-table-expand{
    font-size: 0;
  }
  .demo-table-expand label{
    width: 90px;
    color: white;
  }
  .demo-table-expand .el-form-item{
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
